<template>
  <div class="app-container">
    <div class="button-table-margin">
      <el-button
        size="small"
        type="primary"
        @click="addRes"
        v-permission="['admin/system/resource/save']">
        添加
      </el-button>
      <el-button
        size="small"
        type="primary"
        @click="editRes"
        v-permission="['admin/system/resource/update']">
        修改
      </el-button>
      <el-button
        size="small"
        type="primary"
        @click="deleteRes"
        v-permission="['admin/system/resource/del']">
        删除
      </el-button>
    </div>
    <el-table
      :data="dataList"
      v-loading="listLoading"
      border
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      row-key="id"
      :expand-row-keys="['1', '27', '28']"
      highlight-current-row
      style="width: 100%"
      @current-change="handleCurrentChange">
      <el-table-column
        property="content"
        label="资源名称"
        width="200"
        show-overflow-tooltip></el-table-column>
      <el-table-column
        property="url"
        label="url"
        width="600"
        show-overflow-tooltip></el-table-column>
      <el-table-column label="隐藏菜单">
        <template slot-scope="scope">
          {{ codeBox.MENU_VISIBLE[scope.row.visible] }}
        </template>
      </el-table-column>
      <el-table-column
        property="sort"
        width="100"
        label="排序"></el-table-column>
      <el-table-column property="createTime" label="创建时间"></el-table-column>
    </el-table>
    <el-dialog
      :title="judgmentTitle"
      :visible.sync="dialogFormVisible"
      width="70%">
      <div class="app-container">
        <el-row>
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm el-form-bottom">
            <el-col :span="24">
              <el-form-item label="资源名称" prop="content">
                <el-input v-model="ruleForm.content"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="16" v-show="this.content != ''">
              <el-form-item label="父资源">
                <el-input v-model="content" readonly=""></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-show="this.content == ''">
              <el-form-item label="父资源" prop="resource1">
                <el-select
                  v-model="ruleForm.resource1"
                  @change="changeSelete1"
                  placeholder="请选择">
                  <el-option
                    v-for="item in resource1"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"></el-option>
                </el-select>
                <el-select
                  v-model="ruleForm.resource2"
                  @change="changeSelete2"
                  placeholder="请选择">
                  <el-option
                    v-for="item in resource2"
                    :key="item.id"
                    :label="item.content"
                    :value="item.id"></el-option>
                </el-select>
                <el-select
                  v-model="ruleForm.resource3"
                  @change="changeSelete3"
                  placeholder="请选择">
                  <el-option
                    v-for="item in resource3"
                    :key="item.id"
                    :label="item.content"
                    :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item v-if="ruleForm.resource3 == ''" label="目录图标">
                <el-popover
                  placement="bottom-start"
                  width="460"
                  trigger="click"
                  @show="$refs['iconSelect'].reset()">
                  <IconSelect ref="iconSelect" @selected="selected" />
                  <el-input
                    slot="reference"
                    v-model="ruleForm.resIcon"
                    placeholder="点击选择图标"
                    readonly>
                    <svg-icon
                      v-if="ruleForm.resIcon"
                      slot="prefix"
                      :icon-class="ruleForm.resIcon"
                      class="el-input__icon"
                      style="height: 32px; width: 16px" />
                    <i
                      v-else
                      slot="prefix"
                      class="el-icon-search el-input__icon" />
                  </el-input>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="组件地址" prop="component">
                <el-input v-model="ruleForm.component"></el-input>
                <br />
                <span>项目中页面的地址路径</span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="路由地址" prop="path">
                <el-input v-model="ruleForm.path"></el-input>
                <br />
                <span>项目中页面的路由地址</span>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-form-item label="隐藏菜单" prop="visible">
                <el-radio-group v-model="ruleForm.visible">
                  <el-radio
                    v-for="item in visibleList"
                    :key="item.value"
                    :label="item.value">
                    {{ item.name }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="菜单排序" prop="sort">
                <el-input-number
                  v-model="ruleForm.sort"
                  :min="0"
                  :max="99"
                  :precision="0"
                  label=""></el-input-number>
                <span class="form-word-hint">序号越小越靠前显示 最大99</span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="资源链接" prop="url">
                <el-input v-model="ruleForm.url"></el-input>
                <br />
                <span class="form-word-hint-res">
                  填写完成该资源操作需要的所有链接地址，并用英文逗号分隔，不能有空格或其他特殊字符；
                  <br />
                  菜单类型的资源链接的第一个链接必须填写打开菜单所指向资源的链接，如下/admin/order为打开列表页的链接，后两个为获取数据的链接；
                  <br />
                  列表页面，如果显示列表数据需要3个链接，可如下填写[/admin/order,/admin/order/list,/admin/orderproduct/listbyorder]；
                  <br />
                  新增编辑数据页面，需要填写打开页面链接、保存数据的链接，[/admin/resource/add,/admin/resource/create]；
                  <br />
                  如果打开页面还会调用其他资源链接，请用逗号分隔添加在之后，如[/admin/resource/add,/admin/resource/create,/admin/resource/listparent]；
                  <br />
                  如果是一级菜单，平台：admin_menu_模块名，商家：seller_menu_模块名，如admin_menu_order
                  <br />
                </span>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getResTree,
  delResTree,
  saveRes,
  toEditRes,
  updateRes,
} from "@/api/system";
import { Message } from "element-ui";
import { getCodeManager, codeToArray, uploadFileImage } from "@/api/all";
import IconSelect from "@/components/IconSelect";
export default {
  name: "resource",
  components: { IconSelect },
  data() {
    return {
      dataList: [],
      childrenData: [],
      visibleList: [],
      listLoading: false,
      currentRow: null,
      judgmentTitle: "资源添加",
      judgmentType: "1",
      dialogFormVisible: false,
      resource1: [
        {
          id: 27,
          name: "商家资源",
        },
        {
          id: 28,
          name: "平台资源",
        },
      ], // 第一级分类
      resource2: [], // 第二级分类
      resource3: [], // 第二级分类
      showLast: false, // 默认=隐藏第三季分类
      multipleSelection: [],
      typeList: [],
      content: "",
      ruleForm: {
        content: "",
        resource1: "",
        resource2: "",
        resource3: "",
        url: "",
        path: "",
        component: "",
        resIcon: "",
        visible: "",
        sort: "0",
      },
      rules: {
        content: [
          {
            required: true,
            message: "请输入资源名称",
            trigger: "blur",
          },
          {
            max: 50,
            message: "不能超过50个字符",
            trigger: "blur",
          },
        ],
        resource1: [
          {
            required: true,
            message: "请选择父资源",
            trigger: "change",
          },
        ],
        visible: [
          {
            required: true,
            message: "请选择菜单状态",
            trigger: "blur",
          },
        ],
        sort: [
          {
            required: true,
            message: "请输入排序号",
            trigger: "blur",
          },
        ],
        url: [
          {
            required: true,
            message: "请输入资源链接",
            trigger: "blur",
          },
          {
            max: 200,
            message: "不能超过200个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    getCodeManager("MENU_VISIBLE", () => {
      this.visibleList = codeToArray("MENU_VISIBLE");
    });
    this.getList();
    let id = 0;
  },
  methods: {
    // 选择图标
    selected(name) {
      this.ruleForm.resIcon = name;
    },
    load(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve(this.childrenData);
      }, 1000);
    },
    handleCurrentChange(val) {
      // 选中当前行数据
      this.currentRow = val;
    },
    // 获取列表数据
    getList() {
      this.listLoading = true;
      getResTree({
        id: 0,
      }).then((res) => {
        this.dataList = res.data.rows;
        this.listLoading = false;
      });
    },
    reset() {
      this.getList();
    },
    addRes() {
      this.judgmentTitle = "资源添加";
      this.judgmentType = "1";
      this.dialogFormVisible = true;
      this.content = "";
      this.resetForm("ruleForm");
    },
    editRes() {
      if (!this.currentRow) {
        Message.error("请选择操作行。");
        return;
      }
      if (
        this.currentRow.id == 27 ||
        this.currentRow.id == 28 ||
        this.currentRow.id == 1
      ) {
        Message.error("该资源不可编辑。");
        return;
      }
      toEditRes({
        id: this.currentRow.id,
      }).then((res) => {
        this.ruleForm.id = res.data.data.systemResources.id;
        this.ruleForm.content = res.data.data.systemResources.content;
        this.ruleForm.url = res.data.data.systemResources.url;
        this.ruleForm.resource1 = 1;
        this.content = res.data.data.content;
        this.ruleForm.component = res.data.data.systemResources.component;
        this.ruleForm.path = res.data.data.systemResources.path;
        this.ruleForm.resIcon = res.data.data.systemResources.resIcon;
        this.ruleForm.sort = res.data.data.systemResources.sort;
        this.ruleForm.visible = res.data.data.systemResources.visible + "";
      });
      this.judgmentTitle = "资源编辑";
      this.judgmentType = "2";
      this.dialogFormVisible = true;
    },
    deleteRes() {
      if (!this.currentRow) {
        Message.error("请选择操作行。");
        return;
      }
      if (
        this.currentRow.id == 27 ||
        this.currentRow.id == 28 ||
        this.currentRow.id == 1
      ) {
        Message.error("该资源不可操作。");
        return;
      }
      this.$confirm("确定删除吗？", "提示", {
        onfirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delResTree({
          id: this.currentRow.id,
        }).then((res) => {
          if (res.data.success) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getList();
          } else {
            this.$message({
              type: "error",
              message: res.data.message,
            });
          }
        });
      });
    },
    changeSelete1(secound) {
      this.showLast = false;
      this.resource2 = [];
      this.catelist2 = "";
      this.ruleForm.resource2 = "";
      this.resource3 = [];
      this.catelist3 = "";
      this.ruleForm.resource3 = "";
      getResTree({
        id: secound,
      }).then((res) => {
        this.resource2 = res.data.rows;
      });
    },
    changeSelete2(secound) {
      this.resource3 = [];
      this.catelist3 = "";
      this.ruleForm.resource3 = "";
      getResTree({
        id: secound,
      }).then((res) => {
        this.resource3 = res.data.rows;
      });
    },
    changeSelete3(third) {},
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.judgmentType == "1") {
            saveRes(this.ruleForm).then((res) => {
              if (!res.data.success) {
                Message.error(res.data.message);
                return;
              }
              Message.success("操作成功");
              this.dialogFormVisible = false;
              this.getList();
            });
          } else {
            updateRes(this.ruleForm).then((res) => {
              if (!res.data.success) {
                Message.error(res.data.message);
                return;
              }
              Message.success("操作成功");
              this.dialogFormVisible = false;
              this.getList();
            });
          }
        }
      });
    },
    resetForm(formName) {
      this.ruleForm.content = "";
      this.ruleForm.resource1 = "";
      (this.ruleForm.resource3 = ""), (this.ruleForm.resource2 = "");
      this.ruleForm.path = "";
      this.ruleForm.url = "";
      this.ruleForm.component = "";
      this.ruleForm.resIcon = "";
      this.ruleForm.visible = "";
      this.ruleForm.sort = "0";
    },
  },
};
</script>
<style scoped>
.filter-container .el-col-6 {
  margin-bottom: 15px;
}

.filter-item {
  margin-bottom: 0;
}

/deep/ .filter-container label {
  font-size: 14px;
  font-weight: 500;
  margin-right: 10px;
}
</style>
